/**********
    @name: 分页器组件-简化版(不含批量操作)
***********/
<template>
  <!-- 通用分页器 -->
  <el-affix v-if="props.total" position="bottom" :offset="affixOffset" ref="affixRef">
    <div class="page-pagination" >
      <div></div>
      <el-pagination
          :currentPage="props.currentPage"
          :page-size="props.pageSize"
          :page-sizes="[10,15,30,50]"
          layout="total, sizes, prev, pager, next, jumper, slot"
          :total="props.total"
          @update:current-page="handleCurrentChange"
          @update:page-size="handleSizeChange"
      >
        <el-button type="primary" text>
          确认
        </el-button>
      </el-pagination>
    </div>
  </el-affix>
</template>

<script setup>
import {defineProps, ref, defineEmits, watch} from "vue";

const props = defineProps({
  //总数
  total: {
    type: Number,
    default: 0
  },
  //每页条数
  pageSize: {
    type: Number,
    default: 15,
  },
  //当前页
  currentPage: {
    type: Number,
    default: 1
  },
  affixOffset: { //固定分页器距底部的高度
    type: Number,
    default: 0
  },
  loading: { //加载状态
    type: Boolean,
    default: null
  },
})

const emit = defineEmits(['changeSize','currentChange'])
const handleCurrentChange = (page) =>{
  // 返回页码
  emit('currentChange',page)
}
const handleSizeChange = (size) => {
  // 返回size
  emit('changeSize',size)
}

const affixRef = ref()
const handleUpdateAffixRef = () => {
  if(affixRef.value) {
    affixRef.value.updateRoot();
  }
}
// 初始化时更新分页器固定位置
watch(props, () => {
  if(!props.loading) { //如果传了加载状态，直接更新
    handleUpdateAffixRef()
  }
  else if(props.loading === null) { //否则使用延迟更新（如果接口响应超过一秒则无法更新）
    setTimeout(() => { 
      handleUpdateAffixRef()
    }, 1000);
  }
},{deep:true})
</script>

<style scoped lang="scss">
.page-pagination{
  height: 64px;
  background-color: $white;
  border-top: 1px solid $weightBar;
  display: flex;justify-content: space-between;align-items: center;
}
</style>
